#{extends 'main.html' /}
#{set title:'Book ' + komponent.komp_name /}
#{set 'moreScripts'}

<!-- Komp Book -->

    <script src="@{'/public/javascripts/jquery-ui-1.7.2.custom.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{/set}
#{set 'moreStyles'}
    <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/ui-lightness/jquery-ui-1.7.2.custom.css'}" />
#{/set}

<h1>Book komponent</h1>

#{form @confirmBooking(komponent.id)}
    <p>
        <strong>Name:</strong> ${komponent.komp_name}
    </p>

    <p>
        <strong>Note:</strong> ${komponent.komp_note}
    </p>
    #{field 'booking.checkinDate'}
        <p class="${field.errorClass}">
            <strong>Check In Date:</strong> <input type="text" size="10" name="${field.name}" class="datepicker" value="${booking?.checkinDate?.format('yyyy-MM-dd')}"> *
            <span class="error">${field.error}</span>
        </p>
    #{/field}
    
    #{field 'booking.checkoutDate'}
        <p class="${field.errorClass}">
            <strong>Check Out Date:</strong> <input type="text" size="10" name="${field.name}" class="datepicker" value="${booking?.checkoutDate?.format('yyyy-MM-dd')}"> *
            <span class="error">${field.error}</span>
        </p>
    #{/field}  
   
    #{field 'booking.book_note'}
        <p class="${field.errorClass}">
            <strong>Booking Note:</strong> <input type="text" name="${field.name}" size="40" value="${booking?.Book_note}"> *
            <span class="error">${field.error}</span>
        </p>
    #{/field}
    
        <p class="buttons">
        <input type="submit" value="Confirm" name="confirm"> <a href="@{index()}">Cancel</a>    
    </p>
    
#{/form}

<script type="text/javascript" charset="${_response_encoding}">
    $(function() {
		$(".datepicker").datepicker({dateFormat: 'yy-mm-dd'});
	});
</script>